<template>
  <el-dialog
    title="跟进信息"
    v-model="drawerVisible"
    width="100%"
    style="height: 100%"
    fullscreen="true"
  >
    <el-container>
      <el-header>
        <div class="left-panel">
          <!-- <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> -->
        </div>
        <div class="right-panel">
          <div class="right-panel-search">
            <!-- <el-input
              v-model="search.name"
              placeholder="企业名称"
              clearable
              @clear="getData()"
            >
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="getData()">
            </el-button> -->
            <el-button
              type="success"
              @click="getFilter()"
              style="margin-left: 10px"
            >
              高级查询
            </el-button>
          </div>
        </div>
      </el-header>
      <div class="filterParams">
        <el-tag
          v-for="(val, key, i) in filterParams"
          :key="key"
          closable
          type="warning"
          v-show="val"
          @close="closeTag(key)"
        >
          {{ key }}：{{ val }}
        </el-tag>
      </div>
      <el-main class="nopadding">
        <div class="nopaddingTable">
          <!-- ###去掉多余样式（宽度和下边距），增加表格高度100%样式，保证表格填满区域，同时也会影响到无数据提示的位置 -->
          <el-table
            :data="tableData"
            height="100%"
            row-key="id"
            stripe
            @sort-change="sortChange"
            element-loading-text="正在努力加载中..."
            v-loading="loading"
          >
            <el-table-column
              label="企业名称"
              prop="enterprise.name"
              width="auto"
              show-overflow-tooltip
              sortable="custom"
            ></el-table-column>

            <el-table-column label="企业属地" prop="enterprise.block" sortable="custom" width="100">
            </el-table-column>
            <el-table-column
              label="统一社会信用代码"
              prop="enterprise.unifiedCode"
              width="200"
              sortable="custom"
            ></el-table-column>

            <el-table-column
              label="联系电话"
              prop="enterprise.contactNumber"
              width="auto"
              sortable="custom"
            ></el-table-column>

            <el-table-column
              label="填写时间"
              prop="fillingTime"
              width="auto"
              sortable="custom"
            ></el-table-column>

            <el-table-column label="跟进组" prop="followGroup" sortable="custom" width="auto">
            </el-table-column>

            <el-table-column
              label="记录信息"
              prop="recordInformation"
              sortable="custom"
              width="auto"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="220"
            >
              <template #default="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="details(scope.row, scope.$index)"
                  >查看</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="edit(scope.row, scope.$index)"
                  >编辑</el-button
                >
                <el-popconfirm title="确定删除吗？" @confirm="del(scope.row)">
                  <template #reference>
                    <el-button type="text" size="small" style="color: #f56c6c"
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="暂无跟进信息" :image-size="100"></el-empty>
            </template>
          </el-table>
        </div>
        <el-footer>
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            background
            layout="total,prev, pager, next, sizes"
            :total="pagination.total"
            v-model:currentPage="pagination.pageNum"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[5, 10, 20]"
          >
          </el-pagination>
        </el-footer>
      </el-main>
    </el-container>
  </el-dialog>

  <save-drawer
    ref="saveDrawer"
    v-if="drawer.save"
    @onRefresh="onRefresh"
    @closed="drawer.save = false"
  ></save-drawer>

  <details-drawer
    ref="detailsDrawer"
    v-if="drawer.details"
    @onRefresh="onRefresh"
    @closed="drawer.details = false"
  ></details-drawer>

  <filter-drawer
    ref="filterDrawer"
    v-if="drawer.filter"
    @onRefresh="onRefresh"
    @closed="drawer.filter = false"
  ></filter-drawer>
</template>

<script>
import saveDrawer from "./save";
import detailsDrawer from "./details";
import filterDrawer from "./filter";

export default {
  name: "infoFollow-index",
  components: {
    saveDrawer,
    detailsDrawer,
    filterDrawer,
  },
  emits: ["success", "closed"],
  data() {
    return {
      drawerVisible: false,
      tableData: [],
      loading: false,
      drawer: {
        save: false,
        details: false,
      },
      search: {
        page: 1,
        pageSize: 10,
        enterpriseId: "",
        followGroup: "",
        recordInformation: "",
        minFillingTime: "",
        maxFillingTime: "",
        orderData: "",
        sort: "",
      },
      filterParams: {
        跟进调查组: "",
        记录信息: "",
        填写时间范围: "",
      },
      filterArrayEN: [
        "followGroup",
        "recordInformation",
        "minFillingTime",
        "maxFillingTime",
      ],
      filterArrayCN: ["跟进调查组", "记录信息", "填写时间范围"],
      pagination: {
        total: "",
        pageNum: "",
        pageSize: "",
      },
    };
  },
watch: {
    $route(to, from) {
      if(to.fullPath != "/login"){
        this.getData();
      }
    },
  },
  mounted() {},
  methods: {
    //打开时
    open(id) {
      this.search.enterpriseId = id;
      this.search.orderData = "";
      this.search.sort = "";
      this.getData();
    },
    // 刷新
    onRefresh(form) {
      if (form) {
        Object.assign(this.search, form);
      }
      this.getData();
    },
    //修改
    async getData() {
      this.drawerVisible = true;
      this.loading = true;
      let res = await this.$API.sysFollowUp.pageList.get(this.search);
      if (res.code == 0) {
        this.getFilterParams();
        if (res.data) {
          if (res.data.list) {
            this.tableData = res.data.list;
            this.pagination = {
              total: res.data.total,
              pageNum: res.data.pageNum,
              pageSize: res.data.pageSize,
            };
          } else {
            this.$alert("返回数据格式错误，请尝试刷新", "数据错误", {
              type: "error",
              confirmButtonText: "确定",
              dangerouslyUseHTMLString: true,
              showCancelButton: false,
            });
          }
        } else {
          this.$alert("返回数据格式错误，请尝试刷新", "数据错误", {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          });
        }
        this.loading = false;
      } else {
        this.loading = false;
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        )
          .then(() => {
            this.drawerVisible = false;
          })
          .catch(() => {});
      }
    },
    //编辑
    edit(data) {
      this.drawer.save = true;
      this.$nextTick(() => {
        this.$refs.saveDrawer.open("edit").edit(data.id);
      });
    },
    //查看
    details(data) {
      this.drawer.details = true;
      this.$nextTick(() => {
        this.$refs.detailsDrawer.open(data.id);
      });
    },
    //删除
    async del(row) {
      let reqData = { id: row.id };
      let res = await this.$API.sysFollowUp.delete.get(reqData);
      if (res.code == 0) {
        this.onRefresh();
        this.$message.success("删除成功");
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        );
      }
    },
    //高级查询
    getFilter() {
      this.drawer.filter = true;
      this.$nextTick(() => {
        this.$refs.filterDrawer.open(this.search);
      });
    },
    // 关闭页面
    close() {
      this.$emit("closed");
    },
    //分页
    sizeChange(val) {
      this.search.pageSize = val;
      this.getData();
    },
    currentChange(val) {
      this.search.page = val;
      this.getData();
    },
    //查询标签
    getFilterParams() {
      for (let i = 0; i < this.filterArrayCN.length; i++) {
        this.filterParams[this.filterArrayCN[i]] =
          this.search[this.filterArrayEN[i]];
      }
      if (this.search.minFillingTime && this.search.maxFillingTime) {
        this.filterParams.填写时间范围 =
          this.search.minFillingTime + " 至 " + this.search.maxFillingTime;
      }
    },
    closeTag(key) {
      this.filterParams[key] = "";
      for (let i = 0; i < this.filterArrayCN.length; i++) {
        if (this.filterArrayCN[i] == key) {
          this.search[this.filterArrayEN[i]] = "";
        }
        if (!this.search.minFillingTime) {
          this.search.maxFillingTime = "";
        }
      }
      this.getData();
    },
    //排序
    sortChange(value) {
      if (value.prop) {
        if (value.prop.indexOf("enterprise.") == -1) {
          this.search.orderData = value.prop;
        } else {
          this.search.orderData = value.prop.slice(11);
        }
      }
      if (value.order == "ascending") {
        this.search.sort = "asc";
      } else if (value.order == "descending") {
        this.search.sort = "desc";
      } else {
        this.search.sort = "";
        this.search.orderData = "";
      }
      this.getData();
    },
  },
};
</script>

<style scoped>
.elCard:deep(.el-card__body) {
  padding-top: 15px;
  padding-bottom: 0px;
}
</style>
